<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站后台管理系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->
<link rel="stylesheet" type="text/css"  href="../../../../public/layui/css/layui.css">
<link href="../../../../public/admin/css/style_v2.0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/css/style_v2.0.css" />
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script src="https://a.alipayobjects.com/g/datavis/g2/2.3.6/g2.js"></script>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->  
<!--<div class="position mt10">当前位置：<a href="/admin.php/">后台首页</a> > 总览</div>-->
<div class="layui-box1">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg1">
              <div class="grid_content" id="grid_ico01">
                  <span>{$domain_all}<i>个</i></span>
                  <p>共有网站</p>
              </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo  grid-demo-bg2">
             <div class="grid_content" id="grid_ico02">
                  <span>{$vps_all}<i>台</i></span>
                  <p>vps数量</p>
              </div>
          
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg3">
              <div class="grid_content" id="grid_ico03">
                  <span>{$host_all}<i>个</i></span>
                  <p>虚拟主机</p>
              </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="grid-demo grid-demo-bg4">
            <div class="grid_content" id="grid_ico04">
                  <span>{$domain_jixu}<i>个</i></span>
                  <p>急需续费</p>
            </div>
          </div>
        </div>
      </div>
      <!--栅格图标-->
      <div class="c"></div>
      <div id="c1"></div>
</div>
<script>
var data = [复制代码
  {genre: 'Sports', sold: 275},
  {genre: 'Strategy', sold: 115},
  {genre: 'Action', sold: 120},
  {genre: 'Shooter', sold: 350},
  {genre: 'Other', sold: 150},
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
// Step 1: 创建 Chart 对象
var chart = new G2.Chart({
  id: 'c1', // 指定图表容器 ID
  width : 600, // 指定图表宽度
  height : 300 // 指定图表高度
});
// Step 2: 载入数据源,定义列信息
chart.source(data, {
  genre: {
    alias: '游戏种类' // 列定义，定义该属性显示的别名
  },
  sold: {
    alias: '销售量'
  }
});
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')
// Step 4: 渲染图表
chart.render();
</script>
</body>
</html>
